<template>
    <div>
        <van-sticky :offset-top="0">
            <van-nav-bar  left-arrow :title="shows.showName" @click-left="onClickLeft"/>
        </van-sticky>
        <div class="head">
            <div class="le1"><img :src="shows.showImage" alt=""></div>
            <div class="ri1">
                <p class="p1">{{shows.showName}}</p>
                <button class="b1">开演提醒</button>
            </div>
        </div>
        <div class="body">
            <div class="bo1">
                <p class="pb1">￥{{shows.showPrice}}</p>
                <p class="pb2">{{TT}}</p>
            </div>
            <div class="bo2">{{shows.showAddress}}</div>
            <van-divider />
            <div class="bo3">
                <h2>阵容</h2>
                <div class="pb3">
                    <p class="pb1">{{shows.performerName}}</p>
                    <p class="pb2">></p>
                </div>
            </div>
        </div>


        <div class="foot">
            <h2>购票须知:</h2>
            <h3>儿童需购票</h3>
            <h4>儿童一律凭票入场</h4>
            <h3>不支持退换票</h3>
            <h4>票品为有价证券，非普通商品，其背后承载的文化服务具有时效性，稀缺性等特征，不支持退换</h4>
            <h3>电子票</h3>
            <h4>现场验票请观演人员出示APP中电子票二维码验票入场，不支持截屏</h4>
            <h3>演出时长以现场为准</h3>
            <h4>受现场不可控因影响，演出时长以现场为准</h4>
            <h3>实名购票</h3>
            <h4>本场演出实行实名制购票观演政策，一证一票</h4>
            <h3>不支持选座</h3>
            <h4>不支持选座，作文根据购买价位随机安排</h4>
        </div>
    </div>

    <van-action-bar class="buy">
        <van-action-bar-icon icon="like-o" text="收藏" @click="col" />
        <van-action-bar-button type="danger" text="立即购票" @click="btn" />
    </van-action-bar>

</template>

<script>
import axios from 'axios'
import { Toast } from 'vant';
import router from '@/router';
    export default {
        setup() {
            const onClickLeft = () => history.back();
            const onClickIcon = () => Toast('收藏');
            const onClickButton = () => Toast('购买');
            return {
                onClickLeft,
                onClickIcon,
                onClickButton,
            };
        },
        data() {
            return {
                shows:[],
                id : this.$route.params.id,
            }
        },

        created() {
            axios.get('http://localhost:8087/shows/getById/'+this.id).then((res)=>{
                this.shows = res.data.data;
                console.log(this.shows);
                console.log(res);
            })
        },
        computed: {
            TT(){
                let times = this.shows.showTime.substr(0,10)+''; 
                return `${times}`
            },
        },
        methods: {
            btn(){
                axios.post('http://localhost:8087/buyShow/add', {
                    id: Math.random()*1000000,
                    userId: sessionStorage.getItem('userId'),
                    showId: this.id,
                    name: this.shows.showName,
                    showNumber: this.shows.showPrice,
                    showImage: this.shows.showImage,
                }).then(function() {
                    // router.push('/ppc')
                    Toast.success('购买成功');
                }).catch(function (error) {
                    console.log(error);
                })
            },
            col(){
                axios.post('http://localhost:8087/collection/saveCollection', {
                    collectionId: Math.random()*1000000,
                    collectionShow: this.shows.showName,
                    showPrice: this.shows.showPrice,
                    showImg: this.shows.showImage,
                }).then(function() {
                    // router.push('/ppc')
                    Toast({
                        message: '收藏成功',
                        icon: 'like-o',
                    });
                }).catch(function (error) {
                    console.log(error);
                })
            },
        }
    }
    
</script>

<style lang="scss" scoped>
    ::v-deep .van-nav-bar__title{
        font-weight: bold;
        font-style: italic;
        color: rgb(231, 94, 94);
    }
    ::v-deep .van-icon-arrow-left:before{
        color: #000;
        font-weight: bold;
        font-size: 5vw;
        margin-top: 2vw;
    }
    .buy{
        z-index: 5;
    }
    .head{
        background-color: #eee;
        width: 100%;
        display: flex;
        padding-top: 3vw;
        padding-bottom: 6vw;
        overflow: hidden;
        .le1{
            width: 35%;
            margin-left: 5vw;
            margin-right: 5vw;
            img{
                width: 35vw;
                height: 23vh;
            }
        }
        .ri1{
            width: 50%;
            position: relative;
            p{
                text-align: left;
                font-weight: bold;
                font-size: 6vw;
                word-break: break-all;
                word-wrap: break-word;
            }
            .b1{
                position: absolute;
                left: 1vw;
                top: 38vw;
                background: rgb(237, 55, 23);
                color: #fff;
                border: none;
                padding: 3vw 7vw;
            }
        }
    }
    .body{
        margin-top: 3vw;
        .bo1{
            width: 100%;
            display: flex;
            position: relative;
            .pb1{
                position: absolute;
                left: 5vw;
                font-size: 6vw;
                color: red;
                font-weight: bold;
            }
            .pb2{
                position: absolute;
                right: 5vw;
                top: 2vw;
                font-size: 4vw;
                font-weight: bold;
            }
        }
        .bo2{
            margin-top: 12vw;
            text-align: left;
            margin-left: 7vw;
            font-weight: bold;
            font-size: 4vw;
        }
        .bo3{
            text-align: left;
            margin-left: 5vw;
            margin-top: 6vw;
            .pb3{
                margin-top: 3vw;
                width: 94%;
                display: flex;
                position: relative;
                border: solid;
                height: 14vw;
                border-width: 0.1vw;
                border-color: #eee;
                background-color: #eee;
                .pb1{
                    position: absolute;
                    left: 5vw;
                    font-weight: bold;
                    font-size: 4vw;
                    top: 4vw;
                }
                .pb2{
                    position: absolute;
                    right: 5vw;
                    font-weight: bold;
                    font-size: 4vw;
                    top: 5vw;
                }
            }
        }
    }
    .foot{
        h2{
            margin-top: 15vw;
            text-align: left;
            margin-left: 5vw;
            margin-bottom: 8vw;
            margin-right: 5vw;
        }
        h3{
            margin-top: 5vw;
            text-align: left;
            margin-left: 5vw;
            margin-right: 5vw;
        }
        h4{
            margin-top: 2vw;
            text-align: left;
            margin-left: 5vw;
            margin-right: 5vw;
            font-style: italic;
        }
    }
</style>